<template>
  <div>
    <div class="trading_head">
      <div class="left open_cbl">
        <a href="javascript:history.back(-1)">
          <img src="../img/fh.png" alt>
        </a>
        <span>划转</span>
      </div>
    </div>
    <div class="ws_small">
      <div style="text-align: left">划转方向</div>
      <div id="trigger1" class="o_qbzh" @click="showPicker">
        <div class="ns1">从</div>
        <div class="ns2 c_qbdz">
          <span id="user1" data-type="1">{{start}}</span>
          <img src="../img/yjt_h.png" alt>
        </div>
      </div>
      <div class="o_qbzh" id="trigger2" @click="showPicker1">
        <div class="ns1">转至</div>
        <div class="ns2 z_qbdz">
          <span id="user2" data-type="3">{{ends}}</span>
          <img src="../img/yjt_h.png" alt>
        </div>
      </div>
      <!-- 币种 -->
      <div style="margin-top:.5rem;text-align: left" id="user3">币种</div>
      <div class="o_qbzh" id="trigger3" @click="showPicker3">
        <div class="ns1">{{moreytype}}</div>
        <div class="ns2 c_qbdz">
          <img src="../img/yjt_h.png" alt>
        </div>
      </div>
      <div class="hz_sm">
        <!-- <div class="ns1">!</div>
        <div class="ns2">挖矿账户转出T+1到账</div> -->
      </div>
      <!-- 数量 -->
      <div style="text-align: left">划转数量</div>
      <div class="o_qbzh">
        <input
          v-model="moreyali"
          class="sr_num"
          style="border:none;background: transparent;height: .8rem;margin:0;padding:0"
          type="number"
          placeholder="请输入划转数量"
        >
        <div class="all_hz" @click="all_morny">全部划转</div>
      </div>
      <div style="text-align: left" class="kg_num">可转{{money}}</div>
      <div class="gg_btn" ref="pushbutton" @click="pushbuttonp">确认划转</div>
    </div>

    <Tabbar :idx="4"/>
  </div>
</template>
<script>
import Tabbar from "@/views/public/Tabbar.vue";
import { request } from 'http';
import { constants } from 'crypto';
import { setTimeout } from 'timers';
export default {
  components: {
    Tabbar
  },
  created() {
    this.$axios.post("/index/asset/getallbtype", {}).then(res => {
      var zhuan = [];
      if (res.data.code == 0) {
        for (var i = 0; i < res.data.info.length; i++) {
          var json = {
            text: res.data.info[i].text,
            value: res.data.info[i].values
          };
          zhuan.push(json);
          if(json.text=="钱包账户"){
            this.start= json.text;
            this.start1= json.value;
          }
           if(json.text=="OTC账户"){
            this.ends= json.text;
            this.ends1= json.value;
          }
        }
        this.column1 = zhuan;

        //发送币种请求
        this.moreybi();
      }
    });


  },
  data() {
    return {
      column1: [],
      column3: [],
      start: "",
      start1: "",
      ends: "",
      ends1: "",
      moreytype: "请选择币种",
      moreytype1: "",
      money:0,
      ispush:false,
      moreyali:""
    };
  },
  methods: {
    showPicker() {
      this.picker = this.$createPicker({
        title: "请选择账户",
        data: [this.column1],
        onSelect: this.selectHandle
      });
      this.picker.show();
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      this.start = selectedText.join(" ");
      this.start1 = selectedVal.join(", ");
      this.moreybi();
      this.moreytype="请选择币种";
      this.moreytype1="";
      this.moreyali="";
      this.money="";
    },

    showPicker1() {
      this.picker = this.$createPicker({
        title: "请选择账户",
        data: [this.column1],
        onSelect: this.selectHandle1
      });
      this.picker.show();
    },
    selectHandle1(selectedVal, selectedIndex, selectedText) {
      this.ends = selectedText.join(" ");
      this.ends1 = selectedVal.join(", ");
      this.moreybi();
      this.moreytype="请选择币种";
      this.moreytype1="";
      this.moreyali="";
      this.money="";
    },

    showPicker3() {
      this.picker = this.$createPicker({
        title: "请选择币种",
        data: [this.column3],
        onSelect: this.selectHandle3
      });
      this.picker.show();
    },
    selectHandle3(selectedVal, selectedIndex, selectedText) {
      this.moreytype = selectedText.join(" ");
      this.moreytype1 = selectedVal.join(", ");
      this.moreyali="";
        this.$axios.post("/index/asset/crubalancedhz", {
            btype:this.start1,
            ftype:this.moreytype1
        }).then(res => {
            this.money=res.data.info;
        });
    },

    moreybi(){
        //请求币种的接口
        this.$axios.post("/index/asset/cruintersect", {
            stype:this.start1,
            etype:this.ends1
        }).then(res => {
          var zhuan1 = [];
          if (res.data.code == 0) {
            for (var i = 0; i < res.data.info.length; i++) {
              var json = {
                text: res.data.info[i].text,
                value: res.data.info[i].values
              };
              zhuan1.push(json);
            }
            this.column3 = zhuan1;
            if(zhuan1[0].text){
              this.moreytype=zhuan1[0].text;
              this.moreytype1=zhuan1[0].value;
            }
          }
        });
    },

    //全部划转
    all_morny(){
        this.moreyali=this.money;
    },

    pushinput(){
        if(this.moreytype1&&Number(this.moreyali)>0){
            this.ispush=true;
            this.$refs.pushbutton.style.background="#03BE87";
        }else{
            this.ispush=false;
            this.$refs.pushbutton.style.background="#B4BDD7";
        }
    },

    pushbuttonp(){
        if(!this.ispush) return;
        this.$axios.post("/index/asset/transfer", {
            stype:String(this.start1),
            etype:String(this.ends1),
            fieltype:String(this.moreytype1),
            number:String(this.moreyali)
        }).then(res => {
            if(res.data.code==0){
                this.$createToast({
                  txt: res.data.msg,
                  type: "txt",
                  time: 1200
                }).show();
                setTimeout(()=>{
                  this.$router.back(-1);
                },1200)
            }else{
            this.$createToast({
                txt: res.data.msg,
                type: "txt",
                time: 1200
                }).show();
            }
        });
    }
  },

  watch:{
      moreytype(value){
          this.pushinput();
      },
      moreyali(value){
          this.pushinput();
      }
  }
};
</script>
<style lang="less" scoped>
@import url("../less/transfer");
</style>

